<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <style>
        .box{
            width: 1000px;
            height: 100px;
            /*background: red;*/
            position: relative;
        }
        .line{
            width: 200px;
            height: 10px;
            z-index: 10;
            position: absolute;
        }
        .line div{
            width: 5px;
            height:100%;
            background: red;
        }
        .line div:hover{
            cursor: e-resize;
        }
        .lineL{
            float: left;
        }
        .lineR{
            float: right;
        }

    </style>
    <script type="application/javascript">
        var mouse_x;
        var mouse_y;
        var margin_top;
        var margin_left;
        var to_x,to_y;
        var nowOBJ;

        function Line(type) {
            this.newNode =  document.createElement("div");
            //记录newNode的绝对位置
            this.nodeLM = 0;
            this.nodeTM = 0;
            //记录鼠标按下时鼠标的绝对位置
            this.mY = 0;
            this.mX = 0;
            //装载左右拉伸
            this.nodeLeft = document.createElement("div");
            this.nodeRight = document.createElement("div");
            this.nodeLeft.setAttribute("class","lineL");
            this.nodeRight.setAttribute("class","lineR");
            this.newNode.appendChild(this.nodeLeft);
            this.newNode.appendChild(this.nodeRight);
            this.timer = false;
            var _self = this;


            this.newNode.setAttribute('class','line');
            if(type=="line1"){
                this.newNode.style.background = "black";
            }else if(type=="line2"){
                this.newNode.style.background = "yellow";
            }
            this.newNode.onmousedown = function (e) {
                _self.nodeLM = _self.newNode.offsetLeft;
                _self.nodeTM = _self.newNode.offsetTop;
                _self.mY = e.pageY;
                _self.mX = e.pageX;
                _self.timer = true;
                nowOBJ = _self;
                console.log(_self.nodeLM+"----"+_self.nodeTM+"-----"+_self.mX+"------"+_self.mY);

            }
            this.newNode.ondblclick = function () {
                _self.move();
            }
            document.onmouseup = function(){
                //clearInterval(_self.timer);
                nowOBJ.timer = false;
            };
            document.onmousemove = function(e){
                if(nowOBJ!=undefined){

                    if(nowOBJ.timer){
                        var e=e||window.event;
                        mouse_x=e.pageX;
                        mouse_y=e.pageY;
                        var moveX = mouse_x-nowOBJ.mX+nowOBJ.nodeLM;
                        var moveY = mouse_y-nowOBJ.mY+nowOBJ.nodeTM;
                        console.log(moveX);
                        nowOBJ.newNode.style.left = moveX+"px";
                        nowOBJ.newNode.style.top = moveY+"px";
                            //console.log(mouse_x+"------------===-------------"+mouse_y)
                    }
                }
            };
        }
        Line.prototype ={
            construcrot: Line,
            _self:this,
           /* init:function () {
                this.newNode.class = "line";
            },*/
            
            move:function () {
                alert(123);
            }
        }



        function addL() {
            var bb = document.getElementById("bb");
            var line1 = new Line("line1");
            var line2 = new Line("line2");
            bb.appendChild(line1.newNode);

            //bb.appendChild(line2.newNode);
        }
    </script>
</head>
<body >
    <button onclick="addL()">添加</button>
    <div class="box" id="bb"></div>
</body>
</html>